<script setup lang="ts">
import { useFavoriteStore } from '@/stores/favoriteStore'
import { usePlayerStore } from '@/stores/playerStore'
import { RouterView } from 'vue-router'
import Player from '@/components/player/index.vue'
import Tabbar from '@/components/tabbar/index.vue'
import MSearch from '@/components/search/index.vue'
const playerStore = usePlayerStore()
const favoriteStore = useFavoriteStore()
const route = useRoute()
const visible = ref<boolean>(false)
onMounted(() => {
  // 初始化喜欢的歌曲id数据
  favoriteStore.initFavoriteSongIdList()
  // 获取排行榜数据
  playerStore.getTopList()
})
watch(
  () => route.meta,
  (newVal) => {
    visible.value = (newVal as { hasTabbar: boolean }).hasTabbar || true
  }
)
function focus() {
  playerStore.showSearch = true
}
</script>

<template>
  <van-search shape="round" background="#222" placeholder="请输入搜索关键词" @focus="focus" />
  <m-search />
  <RouterView />
  <player />
  <tabbar v-show="visible" />
</template>

<style scoped lang="scss"></style>
